<template>
    <div class="MyMessageBox">
        <div class="box">
            <div class="text">{{msg}}</div>
            <div class="MyMessageBox-body">
                <el-select v-model="tenantId" placeholder="请选择">
                    <el-option v-for="item in list" :key="item.id" :label="item.tenantName" :value="item.id" />
                </el-select>
            </div>
            <div class="MyMessageBox-bottom">
                <div class="MyMessageBox-bottom-inner">
                    <el-button @click="emit('click', { id: tenantId })" type="primary">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const emit = defineEmits(['click'])
defineProps({
    msg: {
        type: String,
        required: true
    },
    list: {
        type: Array,
        required: true
    },
})
const tenantId = ref('')
</script>

<style scoped lang="scss">
.MyMessageBox {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #00000050;
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 500px;
        background: white;
        border-radius: 2px;
        min-height: 200px;
        padding: 20px;
        position: relative;
        box-sizing: border-box;

        .MyMessageBox-body {
            margin-top: 30px;
        }

        .MyMessageBox-bottom {
            position: absolute;
            bottom: 20px;
            width: 100%;
            left: 0;
            bottom: 20px;

            .MyMessageBox-bottom-inner {
                display: flex;
                justify-content: end;
                padding: 0 20px;
            }
        }

        .text {
            font-weight: bold;
        }
    }
}
</style>